#{extends 'main.html' /}
#{set title:'Statistiques' /}
#{set 'moreStyles'}
        #{stylesheet 'graph.css' /}
#{/set}
<script>
	var values1 = new Array();
	var j = 0;
	#{list finalListIntervention, as:'i'}
		values1[j] = ${i.moyenneGenerale};
		j++;
	#{/list}
	$(function(){		
		
		/*$("#f-product1").change(function(){
			if($("#f-product1").attr("checked")){
				for(var i = 1; i < values1.length + 1; i++){
					var bar = $(".graph-container > li:nth-child("+i+") .bar-inner");	
					$(bar).height(values1[i-1]*100/5+"%");
					$(bar).css("bottom","0");
				}
			}
		});*/
		
		$("body").ready(function(){
			//if($("#f-product1").attr("checked")){
				for(var i = 1; i < values1.length + 1; i++){
					var bar = $(".graph-container > li:nth-child("+i+") .bar-inner");	
					$(bar).height(values1[i-1]*100/5+"%");
					$(bar).css("bottom","0");
				}
			//}
		});
		
		$('.bar-container').hover(function(){			
			$(this).tooltip('show');
		});
		
		/*$("#f-product2").change(function(){
			if($("#f-product1").attr("checked")){
				for(var i = 1; i < values2.length + 1; i++){
					var bar = $(".graph-container > li:nth-child("+i+") .bar-inner");
					$(bar).css("bottom","0");	
					$(bar).height(values2[i-1]*100/5+"%");					
				}
			}
		});*/
		
		$("#f-none").change(function(){
			if($("#f-none").attr("checked")){
				for(var i = 1; i < values1.length + 1; i++){
					var bar = $(".graph-container > span > li:nth-child("+i+") .bar-inner");
					$(bar).height(0);	
					$(bar).css("bottom","-2.5em");	
				}
			}
		});	
	});
</script>
<section>
	<div id="container_data">	
		<div class="row">
			<div class="span10 offset1">
				 	<span class="button-label">Size:</span>
				    <input type="radio" name="resize-graph" id="graph-small" /><label for="graph-small">Small</label>
				    <input type="radio" name="resize-graph" id="graph-normal" checked="checked" /><label for="graph-normal">Normal</label>
				    <input type="radio" name="resize-graph" id="graph-large" /><label for="graph-large">Large</label>   
				
								<span class="button-label">Color:</span>
				    <input type="radio" name="paint-graph" id="graph-blue" checked="checked" /><label for="graph-blue">Blue</label>
				    <input type="radio" name="paint-graph" id="graph-green" /><label for="graph-green">Green</label>
				    <input type="radio" name="paint-graph" id="graph-rainbow" /><label for="graph-rainbow">Rainbow</label>
				
								<span class="button-label">Valeurs:</span>
				    <!-- <input type="radio" name="fill-graph" id="f-none" /><label for="f-none">Aucune</label>-->
				    <input type="radio" name="fill-graph" id="f-product1" checked="checked" /><label for="f-product1">Moyenne G&eacute;n&eacute;rale</label>
				    <!-- <input type="radio" name="fill-graph" id="f-product2" /><label for="f-product2">Product 2</label>  -->
				    <!-- <input type="radio" name="fill-graph" id="f-product3" /><label for="f-product3">Product 3</label> -->
				
			
				    <ul class="graph-container">
				    	%{ j = 0;}%  
				    	#{list finalListIntervention, as:'i'}
				    	#{if j%4==0}
				    	#{/if}
				        <li>
				            <div class="bar-wrapper">
				                <div id="to" rel="tooltip" data-original-title="${i.subjectIntervention} (${i.moyenneGenerale*100/5}%)" class="bar-container">
				                    <div class="bar-background"></div>
				                    <div class="bar-inner"></div>
				                    <div class="bar-foreground"></div>
				                </div>
				            </div>
				        </li>
				        %{j++;}%  
				        #{/list}			    	
				        <li>
				            <ul class="graph-marker-container">
				                <li style="bottom:25%;"><span>25%</span></li>
				                <li style="bottom:50%;"><span>50%</span></li>
				                <li style="bottom:75%;"><span>75%</span></li>
				                <li style="bottom:100%;"><span>100%</span></li>
				            </ul>
				        </li>        
					</ul>
				</div>
			</div>
		</div>
</section>